<template>
	<view class="container page-order-booking">
		<view class="module-address" @tap="handleSelectAddress">
			<view class="item-phone">庄q 137****5114</view>
			<view class="item-address">广东省广州市黄埔区区块链生产基地</view>
			<text class="iconfont iconjiantou"></text>
		</view>
		<view class="module-pay-way">
			<view class="module-header">支付方式</view>
			<view class="module-body">
				<radio-group @change="payChange">
					<label
						class="uni-list-cell uni-list-cell-pd"
						v-for="(item, index) in payWay"
						:key="item.value"
					>
						<view>
							<radio :value="item.value" :checked="index === currentPay" />
						</view>
						<view>{{ item.name }}</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="module-product">
			<view class="module-header">商品信息</view>
			<view class="module-body">
				<view
					class="shop-content"
					v-for="(item, index) in productList"
					:key="item.id"
				>
					<view class="shop-header">{{ item.shop }}</view>
					<view class="shop-product">
						<view
							class="item"
							v-for="product in item.product"
							:key="product.id"
						>
							<productInfo
								:title="product.title"
								:tips="product.tips"
								:count="product.count"
								:price="product.price"
								style="width: 100%;"
							></productInfo>
						</view>
					</view>

					<view class="module-price">
						<view class="item" @tap="handleSelectWay(index)">
							选择配送方式
							<text class="item-content">
								{{ item.way == 1 ? '物流配送' : '到店自提' }}
								<text class="iconfont iconjiantou"></text>
							</text>
						</view>
						<view class="item" @tap="handleSelectTime(index)">
							{{ item.way == 1 ? '期望送达时间' : '自提时间' }}
							<text class="item-content">
								{{ item.time }}
								<text class="iconfont iconjiantou"></text>
							</text>
						</view>
						<!-- <view class="item">
							运费
							<text class="price">
								￥0
							</text>
						</view> -->
						<view class="item" style="justify-content: flex-end;">
							共{{ item.totalCount }}件，小计
							<text class="price">￥{{ item.totalPrice }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottom module-button">
			<view class="total">
				实付款:
				<text class="money">￥{{ numPrice }}</text>
			</view>
			<button class="settlement-btn" type="main" @tap="handleBooking">
				提交订单
			</button>
		</view>

		<uniPopup ref="popupWay" type="bottom" class="modal-way">
			<view class="modal-content">
				<view class="modal-header">
					<view class="title">配送方式</view>
					请选择配送方式
				</view>
				<view class="modal-list">
					<view
						class="item"
						v-for="(item, index) in way"
						:key="index"
						@tap="handleConfirmWay(item)"
					>
						{{ item.label }}
					</view>
				</view>
				<view class="modal-button">
					<button type="default" class="button-close" @tap="handleClose">
						取消
					</button>
				</view>
			</view>
		</uniPopup>

		<uniPopup ref="popupTime" type="bottom" class="modal-way">
			<view class="modal-content">
				<view class="modal-header">
					<view class="title">
						送达时间
						<!-- {{ item.way == 1 ? '送达时间' : '自提时间' }} -->
					</view>
				</view>
				<view class="modal-list">
					<view
						class="item"
						v-for="(item, index) in time"
						:key="index"
						@tap="handleConfirmTime(item)"
					>
						{{ item }}
					</view>
				</view>
				<view class="modal-button">
					<button type="default" class="button-close" @tap="handleClose">
						取消
					</button>
				</view>
			</view>
		</uniPopup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import productInfo from '@/pages/components/product-info/product-info.vue';
export default {
	components: {
		uniPopup,
		productInfo,
	},
	data() {
		return {
			currentPay: -1,
			payWay: [
				{
					value: '1',
					name: '在线支付',
				},
			],
			numPrice: '',
			productList: [],
			wayIndex: -1,
			way: [
				{
					value: 1,
					label: '物流配送',
				},
				{
					value: 2,
					label: '到店自提',
				},
			],
			timeIndex: -1,
			time: ['09:00~15:00', '14:00~19:00', '19:00~22:00'],
		};
	},
	computed: {
		goodsList() {
			return this.$store.getters.goodsList;
		},
		allTotal() {
			return this.$store.getters.allTotal;
		},
	},
	onLoad(options) {
		if (options.id && uni.getStorageSync('detailsBooking')) {
			this.productList.push(JSON.parse(uni.getStorageSync('detailsBooking')));
			this.numPrice = this.productList[0].totalNum;
			this.$set(
				this.productList[0],
				'totalPrice',
				this.productList[0].totalNum,
			);
			this.$set(this.productList[0], 'totalCount', this.productList[0].count);
			this.$set(this.productList[0], 'way', 1);
			this.$set(this.productList[0], 'time', '09:00~15:00');
		} else {
			this.productList = JSON.parse(JSON.stringify(this.goodsList));
			for (let i = this.productList.length - 1; i > -1; i--) {
				if (options.storeId) {
					// console.log(this.productList[i].id, options.storeId);
					if (this.productList[i].id !== Number(options.storeId)) {
						this.productList.splice(i, 1);
					} else {
						for (let j = this.productList[i].product.length - 1; j > -1; j--) {
							if (this.productList[i].product[j].checked === false) {
								this.productList[i].product.splice(j, 1);
							}
						}
					}
				} else {
					if (this.productList[i].checked === false) {
						for (let j = this.productList[i].product.length - 1; j > -1; j--) {
							if (this.productList[i].product[j].checked === false) {
								this.productList[i].product.splice(j, 1);
							}
						}

						if (this.productList[i].product.length <= 0) {
							this.productList.splice(i, 1);
						}
					}
				}
			}

			this.productList.filter((item) => {
				let totalPrice = 0;
				let totalCount = 0;
				for (let i = 0; i < item.product.length; i++) {
					totalPrice += item.product[i].price * item.product[i].count;
					totalCount += item.product[i].count;
				}
				this.$set(item, 'totalPrice', totalPrice);
				this.$set(item, 'totalCount', totalCount);
				this.$set(item, 'way', 1);
				this.$set(item, 'time', '09:00~15:00');
			});

			if (options.storeId) {
				this.numPrice = this.productList[0].totalPrice;
			} else {
				this.numPrice = this.allTotal.price;
			}
		}
	},
	methods: {
		payChange: function (evt) {
			for (let i = 0; i < this.items.length; i++) {
				if (this.items[i].value === evt.target.value) {
					this.currentPay = i;
					break;
				}
			}
		},
		handleSelectWay: function (index) {
			this.wayIndex = index;
			this.$refs.popupWay.open();
		},
		handleClose: function () {
			this.$refs.popupWay.close();
			this.$refs.popupTime.close();
		},
		handleConfirmWay: function (item) {
			this.productList[this.wayIndex].way = item.value;
			this.$refs.popupWay.close();
			this.timeIndex = this.wayIndex;
			this.$refs.popupTime.open();
		},
		handleSelectTime: function (index) {
			this.timeIndex = index;
			this.$refs.popupTime.open();
		},
		handleConfirmTime: function (item) {
			this.productList[this.timeIndex].time = item;
			this.$refs.popupTime.close();
		},

		handleSelectAddress: function () {
			uni.navigateTo({
				url: '../../user/address/index',
			});
		},
		handleBooking: function () {
			uni.navigateTo({
				url: '../payment/index',
			});
		},
	},
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}
.page-order-booking {
	padding: 0 0 100rpx;
}

.module-address {
	background: #fff;
	position: relative;
	padding: 24rpx 32rpx;
	@include borderCreator(bottom, solid, #eee);

	.iconfont {
		float: right;
	}
	.item-phone {
		margin: 0 0 8rpx;
	}
	.item-address {
		color: #888;
	}

	.iconjiantou {
		position: absolute;
		top: 42rpx;
		right: 32rpx;
	}
}

.module-header {
	padding: $uni-spacing-base 28rpx 16rpx;
	color: #888;
	@include borderCreator(bottom, solid, #eee);
}

.module-pay-way {
	.module-body {
		background: #fff;
	}
	uni-radio-group,
	wx-radio-group {
		display: flex;
	}
	.uni-list-cell {
		width: 50%;
		justify-content: flex-start;
	}
	.uni-list-cell::after {
		background: none;
	}
}

.module-product {
	.shop-content {
		background: #fff;
		padding: 18rpx 24rpx 24rpx;
		@include borderCreator(bottom, solid, #ddd);

		&:last-child {
			border-bottom: none;
		}
	}

	.shop-header {
		padding: $uni-spacing-sm 0;
		font-size: $uni-font-size-base;
	}

	.item {
		display: flex;
		padding: 20rpx 0;
		@include borderCreator(bottom, solid, $uni-border-color-grey);

		&:last-child {
			border-bottom: none;
		}
	}
}

.module-price {
	background: #fff;
	padding: 12rpx 0 12rpx 0;

	.item {
		display: flex;
		justify-content: space-between;
		padding: $uni-spacing-sm 0;
		border-bottom: none;
		align-items: center;
	}

	.item-content {
		color: #888;
	}

	.price {
		color: $uni-text-price;
	}

	.iconjiantou {
		position: relative;
		top: 1px;
		right: -4rpx;
		font-size: $uni-font-size-sm;
	}
	.price-tips {
		padding: 0 12rpx;
		border-radius: 3px;
		@include borderCreator('', solid, $uni-text-price);
		font-size: 22rpx;
	}
}

.module-button {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background: #fff;
	padding-left: 24rpx;

	&:before {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		content: '';
		background: #ddd;
	}

	.money {
		color: $uni-text-price;
		font-size: 34rpx;
	}

	.settlement-btn {
		color: #fff;
		border-radius: 0;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 28rpx;
		width: 200rpx;
		margin: 0;
	}
}

.modal-way {
	.modal-content {
		background: #fff;
		padding: 40rpx 0 0;
	}

	.modal-header {
		text-align: center;
		font-size: 26rpx;
		color: #999;
		padding: 0 0 32rpx;
		@include borderCreator(bottom, solid, #eee);
	}

	.title {
		font-size: 30rpx;
		color: #222;
		font-weight: bold;
		line-height: 44rpx;
	}

	.modal-list {
		padding: 16rpx 0;
	}

	.item {
		text-align: center;
		font-size: 30rpx;
		color: $ds-main-color;
		padding: 16rpx 0;
	}

	.button-close {
		background: #fff;
		font-size: 30rpx;
		color: red;
		border-radius: 0;
		padding: 12rpx 0;
	}
}
</style>
